import { ProForm, ProFormText } from '@ant-design/pro-components';
import { Modal } from 'antd';
import type { FormInstance } from 'antd/lib/form/Form';
import { useRef } from 'react';
import { AddDepartmentBean } from '../data';

interface AddDepartmentProps {
    pid: string;
    onSubmit: (values: AddDepartmentBean) => Promise<void>;
    onCancel: (flag?: boolean) => void;
    modalVisible: boolean;
    visibleHandler: (flag?: boolean) => void;
}

export default (props: AddDepartmentProps) => {
    const {
        onSubmit: handleAdd,
        onCancel: handleAddModalVisible,
        modalVisible: addModalVisible,
        pid,
    } = props;
    const formRef = useRef<FormInstance>();

    return (
        <Modal
            title="添加部门"
            open={addModalVisible}
            width={550}
            footer={null}
            centered
            onCancel={() => handleAddModalVisible(false)}
            afterClose={() => handleAddModalVisible(false)}
        >
            <ProForm<AddDepartmentBean>
                onFinish={(values) => handleAdd(values)}
                formRef={formRef}
                layout="vertical"
            >
                <ProFormText
                    width={'xl'}
                    name="pid"
                    label="pid"
                    initialValue={pid}
                    disabled={true}
                />

                <ProFormText
                    width={'xl'}
                    name="name"
                    label="部门名称"
                    placeholder="请输入"
                    rules={[{ required: true, message: '请输入部门名称' }]}
                />
            </ProForm>
        </Modal>
    );
};
